<template>
  <view class="custom-modal-container" v-if="visible" @tap="handleMaskClick">
    <!-- 背景遮罩 -->
    <view class="modal-mask" :class="{ 'show': visible }"></view>
    
    <!-- 弹窗主体 -->
    <view class="modal-content" :class="{ 'show': visible, [modalType]: true }" @tap.stop>
      <!-- 图标 -->
      <view class="modal-icon" :class="iconClass">
        <text class="icon-text">{{ iconText }}</text>
      </view>
      
      <!-- 标题 -->
      <view class="modal-title">{{ title }}</view>
      
      <!-- 内容 -->
      <view class="modal-body" v-if="content">
        <text class="body-text">{{ content }}</text>
      </view>
      
      <!-- 输入框（可选） -->
      <view class="modal-input" v-if="showInput">
        <textarea 
          v-model="inputValue"
          :placeholder="inputPlaceholder"
          :maxlength="inputMaxLength"
          class="input-area"
          :auto-height="true"
        />
        <text class="input-count">{{ inputValue.length }}/{{ inputMaxLength }}</text>
      </view>
      
      <!-- 按钮组 -->
      <view class="modal-buttons">
        <view 
          v-if="showCancel"
          class="modal-btn btn-cancel" 
          @tap="handleCancel"
          hover-class="btn-hover"
        >
          <text class="btn-text">{{ cancelText }}</text>
        </view>
        <view 
          class="modal-btn btn-confirm" 
          :class="confirmClass"
          @tap="handleConfirm"
          hover-class="btn-hover"
        >
          <text class="btn-text btn-confirm-text">{{ confirmText }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomModal',
  data() {
    return {
      visible: false,
      title: '',
      content: '',
      confirmText: '确定',
      cancelText: '取消',
      showCancel: true,
      showInput: false,
      inputPlaceholder: '请输入...',
      inputMaxLength: 100,
      inputValue: '',
      modalType: 'confirm',
      onConfirm: null,
      onCancel: null
    }
  },
  computed: {
    // 图标类名
    iconClass() {
      const classMap = {
        confirm: 'icon-confirm',
        success: 'icon-success',
        warning: 'icon-warning',
        danger: 'icon-danger',
        info: 'icon-info'
      }
      return classMap[this.modalType] || 'icon-confirm'
    },
    
    // 图标文本
    iconText() {
      const iconMap = {
        confirm: '✓',
        success: '✓',
        warning: '⚠',
        danger: '✕',
        info: 'i'
      }
      return iconMap[this.modalType] || '✓'
    },
    
    // 确认按钮类名
    confirmClass() {
      return `btn-${this.modalType}`
    }
  },
  methods: {
    /**
     * 显示弹窗
     * @param {Object} options 配置项
     * @param {String} options.type - 类型：confirm/success/warning/danger/info
     * @param {String} options.title - 标题
     * @param {String} options.content - 内容
     * @param {String} options.confirmText - 确认按钮文字
     * @param {String} options.cancelText - 取消按钮文字
     * @param {Boolean} options.showCancel - 是否显示取消按钮
     * @param {Boolean} options.showInput - 是否显示输入框
     * @param {String} options.inputPlaceholder - 输入框占位符
     * @param {Number} options.inputMaxLength - 输入框最大长度
     * @param {Function} options.onConfirm - 确认回调
     * @param {Function} options.onCancel - 取消回调
     */
    show(options = {}) {
      this.title = options.title || '提示'
      this.content = options.content || ''
      this.confirmText = options.confirmText || '确定'
      this.cancelText = options.cancelText || '取消'
      this.showCancel = options.showCancel !== false
      this.showInput = options.showInput || false
      this.inputPlaceholder = options.inputPlaceholder || '请输入...'
      this.inputMaxLength = options.inputMaxLength || 100
      this.inputValue = options.inputValue || ''
      this.modalType = options.type || 'confirm'
      this.onConfirm = options.onConfirm
      this.onCancel = options.onCancel
      
      this.visible = true
    },
    
    /**
     * 隐藏弹窗
     */
    hide() {
      this.visible = false
      this.inputValue = ''
    },
    
    /**
     * 点击遮罩
     */
    handleMaskClick() {
      // 点击遮罩不关闭，防止误操作
    },
    
    /**
     * 点击确认按钮
     */
    handleConfirm() {
      if (this.onConfirm) {
        const result = this.showInput ? this.inputValue : true
        this.onConfirm(result)
      }
      this.hide()
    },
    
    /**
     * 点击取消按钮
     */
    handleCancel() {
      if (this.onCancel) {
        this.onCancel()
      }
      this.hide()
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60rpx;
}

// 背景遮罩
.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8rpx);
  opacity: 0;
  transition: opacity 0.3s ease;
  
  &.show {
    opacity: 1;
  }
}

// 弹窗主体
.modal-content {
  position: relative;
  width: 100%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 60rpx 48rpx 40rpx;
  box-shadow: 0 24rpx 48rpx rgba(0, 0, 0, 0.15);
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  &.show {
    transform: scale(1);
    opacity: 1;
  }
}

// 图标
.modal-icon {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 32rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    opacity: 0.2;
  }
  
  .icon-text {
    font-size: 64rpx;
    font-weight: bold;
    position: relative;
    z-index: 1;
  }
  
  // 确认图标 - 蓝紫渐变
  &.icon-confirm {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    .icon-text {
      color: #fff;
    }
    
    &::before {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
  }
  
  // 成功图标 - 绿色渐变
  &.icon-success {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    
    .icon-text {
      color: #fff;
    }
    
    &::before {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
  }
  
  // 警告图标 - 橙黄渐变
  &.icon-warning {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    
    .icon-text {
      color: #fff;
    }
    
    &::before {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }
  }
  
  // 危险图标 - 红色渐变
  &.icon-danger {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    
    .icon-text {
      color: #fff;
    }
    
    &::before {
      background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    }
  }
  
  // 信息图标 - 蓝色渐变
  &.icon-info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    
    .icon-text {
      color: #fff;
    }
    
    &::before {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
  }
}

// 标题
.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 24rpx;
  line-height: 1.4;
}

// 内容
.modal-body {
  margin-bottom: 40rpx;
  
  .body-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    text-align: center;
    display: block;
    white-space: pre-wrap;
  }
}

// 输入框
.modal-input {
  margin-bottom: 40rpx;
  position: relative;
  
  .input-area {
    width: 100%;
    min-height: 120rpx;
    max-height: 240rpx;
    padding: 20rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    box-sizing: border-box;
  }
  
  .input-count {
    position: absolute;
    bottom: 8rpx;
    right: 16rpx;
    font-size: 24rpx;
    color: #999;
  }
}

// 按钮组
.modal-buttons {
  display: flex;
  gap: 24rpx;
  margin-top: 48rpx;
}

.modal-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  
  .btn-text {
    position: relative;
    z-index: 1;
  }
  
  &.btn-hover {
    transform: scale(0.96);
    opacity: 0.9;
  }
}

// 取消按钮
.btn-cancel {
  background: #fff;
  border: 2rpx solid #e0e0e0;
  color: #666;
  
  &:active {
    background: #f5f5f5;
  }
}

// 确认按钮 - 默认（蓝紫渐变）
.btn-confirm {
  color: #fff;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  &:active::before {
    opacity: 1;
  }
  
  .btn-confirm-text {
    color: #fff;
  }
}

// 确认按钮样式
.btn-confirm.btn-confirm {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
  
  &::before {
    background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%);
  }
}

.btn-confirm.btn-success {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  box-shadow: 0 8rpx 16rpx rgba(67, 233, 123, 0.3);
  
  &::before {
    background: linear-gradient(135deg, #32d86a 0%, #27e8c6 100%);
  }
}

.btn-confirm.btn-warning {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  box-shadow: 0 8rpx 16rpx rgba(250, 112, 154, 0.3);
  
  &::before {
    background: linear-gradient(135deg, #e95f89 0%, #edd02f 100%);
  }
}

.btn-confirm.btn-danger {
  background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
  box-shadow: 0 8rpx 16rpx rgba(255, 71, 87, 0.3);
  
  &::before {
    background: linear-gradient(135deg, #ee3646 0%, #ee5a70 100%);
  }
}

.btn-confirm.btn-info {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 8rpx 16rpx rgba(79, 172, 254, 0.3);
  
  &::before {
    background: linear-gradient(135deg, #3e9bed 0%, #00e1ed 100%);
  }
}

// 只有确认按钮时，占满整行
.modal-buttons:has(.modal-btn:only-child) {
  .modal-btn {
    flex: 1;
  }
}
</style>

